<template>
  <div class="calendar">
    <div class="top_nav">
      <!-- <span>&lt;</span> -->
      <router-link tag='span' to="/main">&lt;</router-link>
      <h1>演出时间</h1>
      <span class="conts">...</span>
    </div>
    <div class="scrollBar">
      <ul>
        <li class="active" @click='setCls(this)'>全部</li>
        <li @click='setCls' v-for="item in showCategoryList" :key="item.id">{{item.name}}</li>
      </ul>
      <router-link tag='span' active-class="pos" to='/map'>
      位置
          </router-link> 
    </div>
    <div class="calendar_tm">
     <!-- <van-cell title="选择单个日期" :value="date" @click="show = true" /> -->
<van-calendar  title="日历"
  :poppable="false"
  :show-confirm="false"
  :style="{ height: '500px' }" />
    </div>
  </div>
</template>

<script>
// import '@/assets/jquery.min.js'
import Vue from 'vue';
import { Calendar,Cell } from 'vant';
Vue.use(Calendar);
Vue.use(Cell);

import { mapState } from "vuex";
export default {
  data() {
    return {
      date: "",
      show: false,
    };
  },

  computed: {
    ...mapState("calendar", ["showCategoryList"]),
  },
  created() {},
  async mounted() {
    this.$store.dispatch("calendar/setShowCategoryList")
     this.$store.dispatch('main/setShowBtoNav',false)
  },
   methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
    setCls(ele){
    }
  },
  distroyed() {},
};
</script>

<style lang='scss' scoped>
.calendar {
  padding: 0 0.1rem;
  width: 100%;
  .top_nav {
    height: 0.6rem;
    border-bottom: 0.01rem solid #aaaaaa;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    align-items: center;
    span {
      display: block;
      line-height: 0.6rem;
      font-size: 0.6rem;
    }
    .conts {
      margin-bottom: 0.4rem;
    }
  }
}
.scrollBar {
  height: 0.8rem;
  font-size: 0.3rem;
  // background: red;
  display: flex;
  align-items: center;
  ul {
    display: flex;
    flex: 1;
    overflow: hidden;
    overflow-x: auto;
    margin-right: 0.05rem;
    justify-content: flex-start;
    li {
      font-family: "Avenir", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      // font-weight: bold;
      flex-shrink: 0;
      margin-right: 0.3rem;
    }
  }
  span{
    margin-left: 0.02rem;
    width: 0.92rem;
    height: 0.4rem;
    line-height: 0.4rem;
    text-align: center;
    border-left: 0.01rem solid #cccccc;
  }
  .pos {
    margin-left: 0.02rem;
    width: 0.92rem;
    height: 0.4rem;
    line-height: 0.4rem;
    text-align: center;
    border-left: 0.01rem solid #cccccc;
    // background: chartreuse;
  }
}
</style>
